<template>
	<view class="ai-container">
		<!-- 标题区域 -->
		<view class="ai-title">
			<text>AI 图片解析</text>
		</view>
		
		<!-- 图片预览区域 -->
		<view class="image-preview-container">
			<image 
				v-if="imageUrl" 
				:src="imageUrl" 
				mode="aspectFit" 
				class="preview-image"
				@error="imageError"
			></image>
			<view v-else class="empty-preview">
				<text>预览/拍照显示</text>
			</view>
		</view>
		
		<!-- 提示文字输入区域 -->
		<view class="prompt-container">
			<textarea 
				class="prompt-input" 
				v-model="prompt" 
				placeholder="请输入提示文字，例如：请分析这张水质图片的污染程度" 
				maxlength="200"
				placeholder-style="color: #999;"
			></textarea>
		</view>
		
		<!-- 按钮区域 -->
		<view class="button-container">
			<button @click="chooseImage" class="action-button">选择图片</button>
			<button @click="openCamera" class="action-button">打开摄像头</button>
			<button @click="uploadAndAnalyze" class="action-button primary" :disabled="!canUpload">上传并解析</button>
			<button @click="reset" class="action-button">重置</button>
		</view>
		
		<!-- 解析结果区域 -->
		<view class="result-container" v-if="showResult">
			<view class="result-title">
				<text>水质分析结果</text>
			</view>
			<view class="result-content">
				<text selectable="true" user-select="true">{{ analysisResult }}</text>
			</view>
			<view class="result-actions">
				<button class="action-button copy-btn" @click="copyResult">复制结果</button>
				<button class="action-button share-btn" @click="shareResult">分享结果</button>
			</view>
		</view>
		
		<!-- 加载提示 -->
		<view class="loading-container" v-if="loading">
			<view class="loading-mask"></view>
			<view class="loading-content">
				<image src="/static/loading.gif" mode="aspectFit" class="loading-icon"></image>
				<text class="loading-text">正在解析中...</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageUrl: '', // 图片URL
				imageFile: null, // 图片文件
				prompt: '', // 提示文字
				analysisResult: '', // 解析结果
				showResult: false, // 是否显示结果
				loading: false, // 加载状态
				// 后端API地址
				apiUrl: 'http://localhost:8891/AI/add'
			}
		},
		computed: {
			// 判断是否可以上传
			canUpload() {
				return this.imageUrl && this.prompt.trim() !== '';
			}
		},
		methods: {
			// 选择图片
			chooseImage() {
				uni.chooseImage({
					count: 1, // 最多可以选择的图片张数
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图
					sourceType: ['album'], // 从相册选择
					success: (res) => {
						this.handleImageSuccess(res);
					},
					fail: (err) => {
						console.error('选择图片失败:', err);
						uni.showToast({
							title: '选择图片失败',
							icon: 'none'
						});
					}
				});
			},
			
			// 打开摄像头
			openCamera() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['camera'], // 使用摄像头
					success: (res) => {
						this.handleImageSuccess(res);
					},
					fail: (err) => {
						console.error('拍照失败:', err);
						uni.showToast({
							title: '拍照失败',
							icon: 'none'
						});
					}
				});
			},
			
			// 处理图片选择/拍照成功的结果
			handleImageSuccess(res) {
				this.imageUrl = res.tempFilePaths[0];
				this.imageFile = res.tempFiles[0];
				this.showResult = false; // 清除之前的结果
				console.log('图片信息:', this.imageFile);
			},
			
			// 图片加载失败
			imageError() {
				uni.showToast({
					title: '图片加载失败',
					icon: 'none'
				});
				this.imageUrl = '';
				this.imageFile = null;
			},
			
			// 上传并解析图片
			uploadAndAnalyze() {
				if (!this.canUpload) {
					uni.showToast({
						title: '请选择图片并输入提示文字',
						icon: 'none'
					});
					return;
				}
				
				this.loading = true;
				this.showResult = false; // 重置结果显示
				
				// 创建上传任务
				const uploadTask = uni.uploadFile({
					url: this.apiUrl,
					filePath: this.imageUrl,
					name: 'url', // 后端接收的参数名 'url'
					formData: {
						text: this.prompt // 后端接收的参数名 'text'
					},
					// 不手动设置 content-type，让浏览器自动生成带 boundary 的格式
					
						success: (uploadRes) => {
						console.log('上传成功 - 原始响应:', uploadRes);
						console.log('响应数据(字符串):', uploadRes.data);
						
						try {
							// 解析响应数据
							let data = JSON.parse(uploadRes.data);
							console.log('解析后的响应数据(对象):', data);
							console.log('code类型:', typeof data.code, 'code值:', data.code);
							console.log('data字段:', data.data);
							
							// 成功情况：code === 200 或 code === "200" 或 success === true
							if (data.code == 200 || data.code === "200" || data.success === true) {
								// 成功获取AI分析结果
								let resultText = '';
								
							// 根据控制台日志，修改获取结果的逻辑
							console.log('尝试从不同位置获取结果');
							
							// 1. 首先检查 data 自身是否直接包含结果字符串
							if (typeof data === 'string') {
								resultText = data;
								console.log('从data本身获取结果:', resultText);
							}
							// 2. 检查 data.data
							else if (data.data !== undefined && data.data !== null) {
								if (typeof data.data === 'string') {
									resultText = data.data;
									console.log('从data.data获取字符串结果:', resultText);
								} else if (typeof data.data === 'object') {
									resultText = JSON.stringify(data.data);
									console.log('从data.data获取对象结果并转为字符串:', resultText);
								} else {
									resultText = String(data.data);
									console.log('从data.data获取其他类型结果并转为字符串:', resultText);
								}
							}
							// 3. 检查是否直接在根级别有 result 字段
							else if (data.result) {
								resultText = data.result;
								console.log('从data.result获取结果:', resultText);
							}
							// 4. 尝试获取消息
							else if (data.message) {
								resultText = data.message;
								console.log('从data.message获取结果:', resultText);
							}
							// 5. 兜底方案
							else {
								resultText = '未能获取分析结果';
								console.log('未找到任何可用结果字段');
							}
								
								// 格式化结果文本，使其更易读
								this.analysisResult = this.formatAnalysisResult(resultText);
								this.showResult = true;
								
								uni.showToast({
									title: '水质解析成功',
									icon: 'success',
									duration: 2000
								});
							} else {
								// 请求成功但业务失败
								this.handleApiError(data.message || data.msg || '解析失败，请稍后重试');
							}
						} catch (e) {
							console.error('解析响应数据失败:', e, uploadRes.data);
							this.handleApiError('服务器响应格式错误');
						}
					},
					fail: (err) => {
						console.error('上传失败:', err);
						this.handleApiError('图片上传失败，请检查网络连接');
					},
					complete: () => {
						this.loading = false;
					}
				});
				
				// 监听上传进度
				uploadTask.onProgressUpdate((res) => {
					console.log('上传进度:', res.progress);
					// 可以在这里实现上传进度条
				});
			},
			
			// 格式化AI分析结果，使其更具可读性
			formatAnalysisResult(text) {
				if (!text) return '未获取到分析结果';
				
				// 尝试检测是否是JSON格式并解析它
				try {
					if (text.startsWith('{') && text.endsWith('}')) {
						const jsonData = JSON.parse(text);
						return JSON.stringify(jsonData, null, 2); // 格式化JSON
					}
				} catch (e) {
					// 如果解析失败，不是有效的JSON，使用原始文本
				}
				
				// 处理可能的Markdown格式
				let formattedText = text;
				
				// 将连续的换行符替换为两个换行符，创建段落
				formattedText = formattedText.replace(/\n\n+/g, '\n\n');
				
				// 添加重要信息的高亮（如数值、指标等）
				formattedText = formattedText.replace(/(\d+\.?\d*\s*[a-zA-Z%]*)/g, (match) => {
					return match; // 在实际应用中可以添加样式
				});
				
				return formattedText;
			},
			
			// 处理API错误
			handleApiError(message) {
				uni.showToast({
					title: message || '解析失败',
					icon: 'none',
					duration: 2000
				});
			},
			
			// 重置所有数据
			reset() {
				this.imageUrl = '';
				this.imageFile = null;
				this.prompt = '';
				this.analysisResult = '';
				this.showResult = false;
			},
			
			// 复制分析结果
			copyResult() {
				uni.setClipboardData({
					data: this.analysisResult,
					success: () => {
						uni.showToast({
							title: '结果已复制到剪贴板',
							icon: 'success'
						});
					}
				});
			},
			
			// 分享分析结果
			shareResult() {
				// 在小程序中，可以调用分享API
				if (uni.canIUse('showShareMenu')) {
					uni.showShareMenu({
						withShareTicket: true,
						menus: ['shareAppMessage', 'shareTimeline']
					});
					
					uni.showToast({
						title: '请点击右上角分享',
						icon: 'none'
					});
				} else {
					// 在H5等环境下，可以使用系统分享API或提示用户手动分享
					uni.showToast({
						title: '请手动分享结果',
						icon: 'none'
					});
				}
			},
			
			// 自定义请求水质分析API
			requestWaterQualityAnalysis(imageFilePath, prompt) {
				return new Promise((resolve, reject) => {
					// 使用uploadFile方法发送multipart/form-data请求
					const uploadTask = uni.uploadFile({
						url: this.apiUrl,
						filePath: imageFilePath,  // 传入本地文件路径
						name: 'url',  // 后端接收的文件参数名为 'url'
						formData: {
							text: prompt  // 后端接收的文本参数名为 'text'
						},
						// 不手动设置 content-type，让浏览器自动生成带 boundary 的格式
						success: (res) => {
							try {
								const data = JSON.parse(res.data);
								console.log('水质分析API响应数据:', data);
								
								if (res.statusCode === 200) {
									if (data.code === 200 || data.success === true) {
										// 处理响应数据，提取实际的分析结果
										let result;
										console.log('辅助方法中尝试提取结果，完整响应数据:', data);
										
										// 按照优先级提取结果
										if (data.result) {
											// 首选：使用result字段
											result = data.result;
											console.log('辅助方法从data.result获取结果');
										} else if (data.data !== undefined && data.data !== null) {
											// 其次：检查data字段
											if (typeof data.data === 'string') {
												result = data.data;
												console.log('辅助方法从data.data获取字符串结果');
											} else if (typeof data.data === 'object') {
												result = JSON.stringify(data.data);
												console.log('辅助方法从data.data获取对象结果');
											} else {
												result = String(data.data);
												console.log('辅助方法从data.data获取结果并转为字符串');
											}
										} else if (data.message) {
											// 如果是错误信息
											result = data.message;
											console.log('辅助方法从data.message获取结果');
										} else {
											// 兜底
											result = '未能获取分析结果';
											console.log('辅助方法未找到有效结果字段');
										}
										
										resolve(result);
									} else {
										// 业务错误
										reject(new Error(data.message || data.msg || '水质分析失败'));
									}
								} else {
									// HTTP错误
									reject(new Error(`请求失败，状态码: ${res.statusCode}`));
								}
							} catch (e) {
								console.error('解析响应数据失败:', e, res.data);
								reject(new Error('服务器响应格式错误'));
							}
						},
						fail: (err) => {
							console.error('请求失败:', err);
							reject(err);
						}
					});
					
					// 监听上传进度
					uploadTask.onProgressUpdate((res) => {
						console.log('上传进度:', res.progress);
					});
				});
			}
		}
	}
</script>

<style>
.ai-container {
	padding: 20rpx;
	background-color: #f8f8f8;
	min-height: 100vh;
}

.ai-title {
	font-size: 36rpx;
	font-weight: bold;
	text-align: center;
	margin: 20rpx 0 30rpx;
	color: #333;
}

.image-preview-container {
	width: 100%;
	height: 400rpx;
	background-color: #fff;
	border-radius: 12rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	margin-bottom: 30rpx;
}

.preview-image {
	width: 100%;
	height: 100%;
}

.empty-preview {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	color: #999;
	font-size: 30rpx;
	background-color: #fafafa;
	border: 1rpx dashed #ddd;
}

.prompt-container {
	margin-bottom: 30rpx;
}

.prompt-input {
	width: 100%;
	height: 180rpx;
	background-color: #fff;
	border-radius: 12rpx;
	padding: 20rpx;
	font-size: 28rpx;
	box-sizing: border-box;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.button-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 30rpx;
}

.action-button {
	width: 48%;
	margin-bottom: 20rpx;
	background-color: #f0f0f0;
	color: #333;
	font-size: 28rpx;
	padding: 20rpx 0;
}

.action-button.primary {
	background-color: #007aff;
	color: #fff;
}

.action-button:disabled {
	background-color: #ccc;
	color: #999;
}

.result-container {
	background-color: #fff;
	border-radius: 12rpx;
	padding: 20rpx;
	margin-top: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.result-title {
	font-size: 30rpx;
	font-weight: bold;
	margin-bottom: 20rpx;
	color: #333;
	border-bottom: 1rpx solid #eee;
	padding-bottom: 10rpx;
}

.result-content {
	font-size: 28rpx;
	line-height: 1.8;
	color: #333;
	padding: 20rpx;
	background-color: #f9f9f9;
	border-radius: 8rpx;
	margin-bottom: 20rpx;
	white-space: pre-wrap;
	word-break: break-word;
}

.result-actions {
	display: flex;
	justify-content: space-around;
	margin-top: 20rpx;
}

.copy-btn, .share-btn {
	width: 40%;
	font-size: 26rpx;
	background-color: #f0f7ff;
	color: #0056b3;
	border: 1px solid #cce5ff;
}

.share-btn {
	background-color: #f0fff4;
	color: #00843e;
	border: 1px solid #c3e6cb;
}

.loading-container {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
}

.loading-mask {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
}

.loading-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #fff;
	padding: 40rpx;
	border-radius: 12rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.loading-icon {
	width: 80rpx;
	height: 80rpx;
	margin-bottom: 20rpx;
}

.loading-text {
	font-size: 28rpx;
	color: #666;
}
</style>
